<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04-绘制柱状图</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html,
    body {
      height: 100%;
    }

    canvas {
      width: 100%;
      height: 100%;
      background-color: #000;
    }
  </style>
</head>

<body>
  <canvas id="bar"></canvas>

  <script>
    function setupCanvas(canvas) {
      var dpr = (scale = window.devicePixelRatio || 1);
      var rect = canvas.getBoundingClientRect();
      canvas.width = rect.width * dpr;
      canvas.height = rect.height * dpr;
      canvas.style.width = rect.width + "px"
      canvas.style.height = rect.height + "px"
      return canvas;
    }
    const canvas = setupCanvas(document.querySelector('#bar'))
    const ctx = canvas.getContext('2d')

    ctx.strokeStyle = 'white'
    // 垂直线
    ctx.moveTo(100, 70)
    ctx.lineTo(100, 500)

    // 水平线
    ctx.moveTo(90, 490)
    ctx.lineTo(620, 490)

    // 垂直刻度
    ctx.moveTo(90, 390)
    ctx.lineTo(100, 390)

    ctx.moveTo(90, 290)
    ctx.lineTo(100, 290)

    ctx.moveTo(90, 190)
    ctx.lineTo(100, 190)

    ctx.moveTo(90, 90)
    ctx.lineTo(100, 90)

    // 水平刻度
    ctx.moveTo(200, 500)
    ctx.lineTo(200, 490)

    ctx.moveTo(300, 500)
    ctx.lineTo(300, 490)

    ctx.moveTo(400, 500)
    ctx.lineTo(400, 490)

    ctx.moveTo(500, 500)
    ctx.lineTo(500, 490)

    ctx.moveTo(600, 500)
    ctx.lineTo(600, 490)

    ctx.stroke()

    // 画矩形
    ctx.fillStyle = '#333'
    ctx.fillRect(110, 490, 80, -200)

    ctx.fillStyle = '#333'
    ctx.fillRect(210, 490, 80, -343)

    ctx.fillStyle = '#333'
    ctx.fillRect(310, 490, 80, -290)

    ctx.fillStyle = '#333'
    ctx.fillRect(410, 490, 80, -430)

    ctx.fillStyle = '#333'
    ctx.fillRect(510, 490, 80, -125)

    // 添加垂直文字内容
    ctx.fillStyle = 'white'
    ctx.font = '20px 宋体'
    ctx.fillText('30', 65, 396, 100)
    ctx.fillText('60', 65, 296, 100)
    ctx.fillText('90', 65, 196, 100)
    ctx.fillText('120', 55, 96, 100)

    // 添加水平文字内容
    ctx.fillText('Apple', 120, 520, 100)
    ctx.fillText('Xiaomi', 220, 520, 100)
    ctx.fillText('Huawei', 320, 520, 100)
    ctx.fillText('OPPO', 428, 520, 100)
    ctx.fillText('VIVO', 528, 520, 100)

    // 添加标题
    ctx.font = '20px 宋体 bold'
    ctx.fillText('数据可视化-ECharts', 50, 30, 200)

  </script>
</body>

</html>